<!--主导航--头部-->
<template>
    <div>
<!--        顶部导航-->
        <div class="header f f-j-b f-a-c">
            <div class="f f-a-c">
                <span v-for="(item,index) in userRouter">
                   <div v-if="!item.hidden"
                        :style="{width: item.meta.title.length * 33 +'px'}"
                        :class="[item.path == $store.state.headerBar ?'click' : '', 'navbar-one']"
                        @click="clicknavbar(item.children,1)"
                   >
                       <svg-icon :icon-class="item.meta.icon || ''"></svg-icon>
                       {{item.meta && item.meta.title}}
                   </div>
                </span>
            </div>
            <div>
                <div class="right-menu" @click="logout">
                    <i class="el-icon-switch-button" />
                    退出登录
                </div>
            </div>
        </div>
<!--        侧边栏-->
<!--        <sidebar :sider-router="selectrouter" @changewidth="acceptwidth"></sidebar>-->
        <sidebar class="sidebar-container" :level-two-routes="selectrouter"></sidebar>
        <div class="app-main" ref="UI">
            <!--            <router-view></router-view>-->
            <!--            二级路由和三级路由的缓存有区分--都要进行判断-->
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive" />
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive" />
        </div>
    </div>
</template>

<script>
    import Sidebar from '@/layout/components/SideBar'
    export default {
        name: "index",
        data(){
            return{
                selectrouter:'home',//点击头部导航后的router--传递给侧边栏路由
                mainMarLeft:'180px',//appmain的离左侧距离
                userRouter:[],//根据后台获取路由数据
            }
        },
        components:{Sidebar},
        created() {
            this.getUserRouter();
        },
        mounted() {
            this.setUI();
        },
        methods:{
            //现在是根据后台获取路由数据
            getUserRouter(){
                this.userRouter = this.$router.options.routes;
                this.userRouter.forEach(item=>{
                    console.log(item.path)
                    if(item.path === this.$store.state.headerBar || item.redirect === this.$store.state.headerBar){
                        this.clicknavbar(item.children,2);
                    }
                });
                // this.$http({
                //     url:'/sys/role/getResMenus',
                // }).then((res)=>{
                //     this.userRouter = res.data;
                //
                // });
            },

            //给css中的变量赋值事件
            setUI(){
                this.$refs.UI.style.setProperty("--width",this.mainMarLeft);//给变量赋值
            },

            //侧边栏子组件传值
            acceptwidth(val){
                this.mainMarLeft = val;
                this.setUI();
            },
            //退出登录
            logout(){
                this.$confirm('确定退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.dialogVisible = false;
                    this.$http({url: '/api/account/logout'});
                    this.$store.commit('logout');
                    this.$router.push(`/login?redirect=${this.$route.fullPath}`);
                    // this.$router.push(`/login`);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    });
                });
            },
            clicknavbar(path,type){
                //type为1的话就是点击事件---进行路由跳转 --- 2的话就是刷新事件  不进行跳转
                if(type===1){
                    this.$router.push({name:path[0].path});
                    this.selectrouter = path;
                }else if(type ===2){
                    this.selectrouter = path;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
$menuBg: red;
$menuHover: red;
$subMenuBg: red;
$subMenuHover: red;
$subMenuActiveText: red;

@import  '../../layout/styles/layout';
    .header{
        position: fixed;
        top: 0;
        left: 0;
        padding-left: 180px;
        z-index: 1002;
        width: 100%;
        height: $navbar-height;
        line-height: 29px;
        background-color: rgba(255, 255, 255, 100);
        color: rgba(255, 255, 255, 100);
        font-size: 20px;
        border: 1px solid rgba(255, 255, 255, 100);
        .navbar-one{
            flex-shrink: 0;
            width: 120px;
            height: 48px;
            line-height:$navbar-height;
            color: #666666;
            font-size: 18px;
            text-align: center;
            border-radius: 20px;
            cursor: pointer;
            margin-left: 30px;
            transition: all ease 0.2s;
            &:hover,&.click{
                color: rgba(64, 158, 255, 100);
                font-weight: bold;
                transform: scale(1.1);
            }
        }
        .right-menu{
            color:#000000;
            width: 100px;
            margin:0 40px 0 20px;
            cursor: pointer;
            font-size: 14px;
            i{
                color:#000000;
            }
        }
    }
    .app-main{
        /* 定义变量 */
        margin-top: $navbar-height;
        margin-left: $sidebar-width-sp;
        --width:'200px';
        width: calc(100% - var(--width));
        background-color: #F2F2F2;
        min-height: calc(100vh - #{$navbar-height});
        transition: .5s;
        overflow: auto;
    }
    @media screen and (max-width: 980px){
        /*mobile*/
        .header{
            padding-left: 0;
            .navbar-one{
                /*flex-shrink: 0;*/
                width: 100px;
                height: 48px;
                line-height:50px;
                color: #666666;
                font-size: 18px;
                text-align: center;
                border-radius: 20px;
                cursor: pointer;
                margin-left: 10px;
                &:hover{
                    color: rgba(64, 158, 255, 100);
                    font-size: 20px;
                    font-weight: bold;
                }
            }
            .navbar-one-click{
                flex-shrink: 0;
                width: 100px;
                height: 48px;
                line-height:45px;
                border-radius: 20px;
                color: rgba(64, 158, 255, 100);
                font-size: 20px;
                font-weight: bold;
                text-align: center;
                cursor: pointer;
                margin-left: 10px;
            }
        }
    }

.sidebar-container {
    transition: width 0.28s;
    width: $sidebar-width-sp !important;
    background-color: $menuBg;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    //overflow: hidden;

    // reset element-ui css
    .horizontal-collapse-transition {
        transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }

    .scrollbar-wrapper {
        overflow-x: hidden !important;
    }

    .el-scrollbar__bar.is-vertical {
        right: 0px;
    }

    .el-scrollbar {
        height: 100%;
    }

    &.has-logo {
        .el-scrollbar {
            height: calc(100% - 50px);
        }
    }

    .is-horizontal {
        display: none;
    }

    a {
        display: inline-block;
        width: 100%;
        overflow: hidden;
    }

    .svg-icon {
        margin-right: 16px;
    }

    .el-menu {
        border: none;
        height: 100%;
        width: 100% !important;
    }

    .el-menu-item, .el-submenu__title {
        //overflow: hidden !important;
        //text-overflow: ellipsis !important;
        //white-space: nowrap !important;
    }

    // menu hover
    .submenu-title-noDropdown,
    .el-submenu__title {
        &:hover {
            background-color: $menuHover !important;
        }
    }

    .is-active > .el-submenu__title {
        color: $subMenuActiveText !important;
    }

    & .nest-menu .el-submenu > .el-submenu__title,
    & .el-submenu .el-menu-item {
        min-width: $sidebar-width-sp !important;
        background-color: $subMenuBg !important;

        &:hover {
            background-color: $subMenuHover !important;
        }
    }
}

</style>
